import { useMemo, useRef, useState } from "react";
import styles from "./index.less";
import { useECharts, useScrollReveal } from "@/hooks";
import { useRequest } from "ahooks";
import { getCount, getCountByDay } from "@/services/home";
import { Select, Card, Col, Row, Statistic } from "antd";
import { objToArr } from "@/utils";
import { DateEnum } from "@/constants/enum";
// import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
const DateArr = objToArr(DateEnum);
export default () => {
  const chartRef = useRef(null);
  const [dateParam, setDateParam] = useState(DateArr[0]);
  const { data: count } = useRequest(getCount);
  const { data: countByDay } = useRequest(
    () => getCountByDay({ param: dateParam.key }),
    {
      refreshDeps: [dateParam.key],
    }
  );
  const config = useMemo(() => {
    const xArr = [];
    const dataArr = [];
    countByDay?.forEach?.((item) => {
      xArr.push(item.customerNum);
      dataArr.push(item.showTime);
    });
    return {
      xAxis: {
        type: "category",
        data: dataArr,
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: xArr,
          type: "line",
        },
      ],
      tooltip: {
        trigger: "axis",
        // 指示器样式配置
        axisPointer: {
          type: "cross",
          label: {
            show: true,
            color: "#808080",
            fontSize: 12,
            padding: [20, 0, 0, 0],
            backgroundColor: "transparent",
          },
          lineStyle: {
            color: "#808080",
            width: 0.5,
          },
        },
      },
    };
  }, [countByDay]);

  useECharts(chartRef, config);
  useScrollReveal(styles.listItem);

  return (
    <div className={styles.container}>
      <div className={styles.top}>
        <div className={styles.title}>今日数据</div>
        <div className={styles.list}>
          <Row gutter={24}>
            <Col span={8}>
              <Card bordered={false} className={styles.listItem}>
                <Statistic
                  title="入住客户数"
                  value={count?.customerNum}
                  // valueStyle={{ color: "#3f8600" }}
                  // prefix={<ArrowUpOutlined />}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card bordered={false} className={styles.listItem}>
                <Statistic
                  title="已入住房间"
                  value={count?.occupiedNum}
                  // valueStyle={{ color: "#cf1322" }}
                  // prefix={<ArrowDownOutlined />}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card bordered={false} className={styles.listItem}>
                <Statistic
                  title="剩余房间"
                  value={count?.unOccupiedNum}
                  // valueStyle={{ color: "#cf1322" }}
                  // prefix={<ArrowDownOutlined />}
                />
              </Card>
            </Col>
          </Row>
        </div>
      </div>
      <div className={styles.bottom}>
        <div className={styles.title}>
          入住数据
          <Select
            value={dateParam.value}
            style={{ width: 100 }}
            options={DateArr}
            onChange={(value, option) => {
              setDateParam(option);
            }}
          />
        </div>
        <div ref={chartRef} className={styles.chart}></div>
      </div>
    </div>
  );
};
